<script setup>
import SearchBox from '@/components/SearchBox.vue'
</script>
<template>
  <section class="section bg-gray">
    <div class="container">
      <div class="flex justify-center align-center">
        <div class="mt-24">
          <search-box>
            <template #showHistory>
              <el-card class="searchHistory">
                <div>历史搜索</div>
              </el-card>
            </template>
          </search-box>

          <div class="search-hot mt-24">
            <b>热门职位：</b>
            <a href="">Java</a>
            <a href="">PHP</a>
            <a href="">.NET</a>
            <a href="">Android</a>
            <a href="">测试工程师</a>
            <a href="">运维工程师</a>
            <a href="">网络工程师</a>
            <a href="">IT技术支持</a>
          </div>
        </div>
      </div>

      <div class="job-menu flex justify-center align-center mt-24 mb-24">
        <aside class="job-menu-list mr-12">
          <el-card>
            <div v-for="i in 7" :key="i" class="list-item">
              <label>{{ 'list' + i }}</label>
            </div>
            <template #footer>Footer content</template>
          </el-card>
        </aside>

        <main class="job-menu-main ml-12 relative">
          <el-card>
            <!-- 广告 -->
            <div class="advertising-box">
              <a href="" class="advertising-1">
                <img
                  style="width: 100%; height: 100%; object-fit: cover"
                  src="https://img.bosszhipin.com/beijin/activity/img/20240221/488f35070cc7d0b69dc062f990bbd71bccc41632c9c835a480c0fe17b37418f00945b742138a9e17.png.webp"
                  alt=""
                />
              </a>
              <a href="" class="advertising-2">
                <img
                  style="width: 100%; height: 100%; object-fit: cover"
                  src="https://img.bosszhipin.com/beijin/activity/img/20240222/488f35070cc7d0b64964b50b0e6addabfb3df6182506fd7a80c0fe17b37418f00945b742138a9e17.png.webp"
                  alt=""
                />
              </a>
              <a href="" class="advertising-3">
                <img
                  style="width: 100%; height: 100%; object-fit: cover"
                  src="https://img.bosszhipin.com/beijin/activity/img/20240222/488f35070cc7d0b6e7d068d9b8f96584408f60dcb37df3cd80c0fe17b37418f00945b742138a9e17.png.webp"
                  alt=""
                />
              </a>
              <a href="" class="advertising-4">
                <img
                  style="width: 100%; height: 100%; object-fit: cover"
                  src="https://img.bosszhipin.com/beijin/activity/img/20240228/488f35070cc7d0b6d0945cbd3f9c51073ac02fecc9479e3780c0fe17b37418f00945b742138a9e17.png.webp"
                  alt=""
                />
              </a>
            </div>
          </el-card>
        </main>
      </div>
    </div>
  </section>
</template>
<style lang="scss" scoped>
// 历史搜索
.searchHistory {
  height: 200px;
  width: 640px;
  position: absolute;
  top: 155px;
}

.search-hot b {
  font-weight: 400;
  color: #757575;
}

.search-hot a {
  display: inline-block;
  background: #ecf5ff;
  border-radius: 6px;
  color: #409eff;
  line-height: 20px;
  padding: 2px 8px;
  margin-right: 12px;
  transition: 0.3s;
}

.search-hot a:hover {
  color: #fcfcfd;
  background: #409eff;
}

// 工作列表
.job-menu-list {
  width: 384px;
  :deep() {
    .el-card__body {
      padding: 0 3px 10px 3px;
    }
    .el-card__footer {
      padding: 16px 20px;
    }
  }
}

.job-menu-main {
  overflow: hidden;
  :deep() {
    .el-card__body {
      padding: 0;
    }
  }
}

.list-item {
  margin-bottom: 0;
  padding: 9px 17px;
  border-radius: 10px;
  height: 40px;
}

.list-item label {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  line-height: 22px;
}

.list-item:hover {
  box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
}

// 广告位
.advertising-box {
  position: relative;
  width: 786px;
  height: 342px;
}

.advertising-1 {
  position: absolute;
  width: 524px;
  height: 228px;
  top: 0px;
  left: 0px;
  display: block;
}

.advertising-2 {
  position: absolute;
  width: 262px;
  height: 228px;
  top: 0px;
  left: 525px;
  display: block;
}

.advertising-3 {
  width: 524px;
  height: 114px;
  top: 229px;
  left: 0px;
  position: absolute;
  display: block;
}

.advertising-4 {
  width: 262px;
  height: 114px;
  top: 229px;
  left: 525px;
  position: absolute;
  display: block;
}

.advertising-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
